<template>
  <div class="container">
    <el-card>
      <el-button type="success" size="small " icon="el-icon-edit" class="btn"
        @click="$router.push('/questions/new')">新增题试</el-button>
      <br />
      <el-form class="form" :inline="true" align="right">
        <el-row type="flex">
          <el-col>
            <el-form-item label="学科" size="small ">
              <el-select placeholder="请选择" style="width: 240px" v-model="form.subjectName">
                <el-option v-for="item in getsubList" :key="item.id" :value="item.id"
                  :label="item.subjectName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="二级目录" size="small ">
              <el-select placeholder="请选择" style="width: 240px" v-model="form.twoLevelDirectory">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="标签" size="small ">
              <el-select placeholder="请选择" style="width: 240px" v-model="form.tags">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="关键字" size="small ">
              <el-input placeholder="根据题干进行搜索" style="width: 240px" v-model="form.keyword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col>
            <el-form-item label="试题类型" size="small ">
              <el-select placeholder="请选择" style="width: 240px" v-model="form.myquestionType">
                <el-option :label="item.label" :value="item.value" v-for="(item, index) in myquestionType"
                  :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="难度" size="small ">
              <el-select placeholder="请选择" style="width: 240px" v-model="form.mydifficulty">
                <el-option :value="item.value" :label="item.label" v-for="(item, index) in mydifficulty"
                  :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="方向" size="small ">
              <el-select placeholder="请选择" style="width: 240px" v-model="form.mydirection">
                <el-option :value="item" v-for="(item, index) in mydirection" :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="录入人" size="small">
              <el-select placeholder="请选择" style="width: 240px" v-model="form.username">
                <el-option :label="item.username" :value="item.id" v-for="item in getusersList"
                  :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col>
            <el-form-item label="题目备注" size="small ">
              <el-input style="width: 240px" v-model="form.remarks"> </el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="企业简称" size="small ">
              <el-input style="width: 240px" v-model="form.enterpriseID"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="城市" size="small ">
              <el-select placeholder="请选择" style="width: 120px" v-model="form.provinces" @change="SelectChange">
                <el-option :label="item" :value="item" v-for="(item, index) in myprovinces" :key="index"></el-option>
              </el-select>
              <el-select placeholder="请选择" style="width: 120px" v-model="form.citys">
                <el-option :label="item" :value="item" v-for="(item, index) in mycitys" :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-button size="small" @click="clear">清除</el-button>
            <el-button size="small" type="primary" style="margin-right: 10px" v-model="pageParams.keyword"
              @click="inputchange">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-alert :title="`数据一共${pageParams.total}条`" type="info" :closable="false" show-icon style="margin-bottom: 20px">
      </el-alert>
      <template>
        <el-table :data="getlist">
          <el-table-column label="试题编号" min-width="120" prop="number"></el-table-column>
          <el-table-column label="学科" min-width="100" prop="subject">
          </el-table-column>
          <el-table-column label="目录" min-width="100" prop="catalog">
          </el-table-column>
          <el-table-column label="题型" min-width="100" prop="questionType">
            <template slot-scope="{row}">
              <span v-if="row.difficulty === '1'">单选</span>
              <span v-else-if="row.difficulty === '2'">多选</span>
              <span v-else-if="row.difficulty === '3'">简答</span>
            </template>
          </el-table-column>

          <el-table-column label="题干" min-width="280" prop="question">
            <template slot-scope="{row}">
              <span v-html="row.question"></span>
            </template>
          </el-table-column>

          <el-table-column label="录入时间" min-width="180" prop="addDate">
            <template slot-scope="{row}">
              {{ row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column label="难度" min-width="100" prop="difficulty">
            <template slot-scope="{row}">
              <span v-if="row.difficulty === '1'">简单</span>
              <span v-else-if="row.difficulty === '2'">一般</span>
              <span v-else-if="row.difficulty === '3'">困难</span>
            </template>
          </el-table-column>
          <el-table-column label="录入人" min-width="100" prop="creator">
          </el-table-column>
          <el-table-column label="操作" min-width="160">
            <template v-slot="{ row }">
              <el-tooltip class="item" effect="light" content="预览" placement="bottom-start">
                <el-button icon="el-icon-view" type="primary" plain circle size="mini" @click="openDilog(row)">
                </el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="light" content="修改" placement="bottom-start">
                <el-button icon="el-icon-edit" type="success" plain circle size="mini" @click="revamp(row)"></el-button>
              </el-tooltip>

              <el-tooltip class="item" effect="light" content="删除" placement="bottom-start">
                <el-button icon="el-icon-delete" type="danger" plain circle size="mini" @click="del(row)"></el-button>
              </el-tooltip>

              <el-tooltip class="item" effect="light" content="加入精选" placement="bottom-start">
                <el-button icon="el-icon-check" type="warning" plain circle size="mini"
                  @click="choiceAdd(row)"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-row type="flex" justify="end">
            <el-pagination background @size-change="changePage" @current-change="changePage"
              :page-size.sync="pageParams.pagesize" :current-page.sync="pageParams.page" :total="pageParams.total"
              layout="total, prev, pager, next,  sizes,jumper" :page-sizes="[1, 2, 3, 4]">
            </el-pagination>
          </el-row>
        </div>
      </template>
      <!-- 预览弹窗 -->
      <questionsPreview :showDialog.sync="showDialog" :DialogData="DialogData"></questionsPreview>
    </el-card>
  </div>
</template>

<script>
import { list, remove, choiceAdd, detail, choice } from '@/api/hmmm/questions.js'
import { list as subjectsList } from '@/api/hmmm/subjects.js'
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
import { list as userlist } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import questionsPreview from '@/module-hmmm/components/questions-preview.vue'

export default {
  data() {
    return {
      showDialog: false,
      getlist: [],
      getsubList: [], // 学科列表
      getusersList: [], // 用户列表
      pageParams: {
        page: 1,
        pagesize: 4,
        total: 0,
        keyword: '' // 关键字搜索
      },
      timer: null,
      form: {
        counts: '',
        pagesize: '',
        pages: '',
        page: '',
        items: '',
        id: '',
        subjectName: '', // 学科
        mydifficulty: '', // 难度
        myquestionType: '', // 题型
        mydirection: '', // 方向
        username: '', // 录入人
        provinces: '', // 城市
        citys: '', // 区
        choiceState: '',
        keyword: '', // 关键字搜索
        remarks: '',
        enterpriseID: ''
      },

      mydifficulty: difficulty, // 难度
      myquestionType: questionType, // 题型
      mydirection: direction, // 方向
      myprovinces: provinces(), // 城市
      mycitys: [], // 区
      DialogData: {}
    }
  },
  components: {
    questionsPreview
  },
  created() {
    this.Getlist(this.pageParams)
    this.subjectsList()
    this.userlist()
  },
  methods: {
    clear() {
      this.form = {
        counts: '',
        pagesize: '',
        pages: '',
        page: '',
        items: '',
        id: '',
        subjectName: '', // 学科
        mydifficulty: '', // 难度
        myquestionType: '', // 题型
        mydirection: '', // 方向
        username: '', // 录入人
        provinces: '', // 城市
        citys: '', // 区
        choiceState: '',
        keyword: '', // 关键字搜索
        remarks: '',
        enterpriseID: ''
      }
      this.pageParams.page = 1
      this.Getlist()
    },
    // 获取基础题库列表
    async Getlist() {
      const listdata = await list(this.pageParams)
      this.getlist = listdata.data.items
      this.pageParams.total = listdata.data.counts
      console.log(this.getlist)
    },
    changePage() {
      this.Getlist()
    },
    // 获取学科列表
    async subjectsList() {
      const { data } = await subjectsList()
      this.getsubList = data.items
    },
    // 获取用户列表
    async userlist() {
      const { data } = await userlist()
      this.getusersList = data.list
    },
    // 选择城市
    SelectChange(current) {
      this.mycitys = citys(current)
    },
    // 搜索
    inputchange(val) {
      // 文本框发生变化时，都需要从第一页获取数据
      this.pageParams.page = 1
      // 重新调用接口获取和当前关键字匹配的数据
      this.Getlist()
    },
    // 删除功能
    del(row) {
      this.$confirm('此操作将永久删除该题目', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(row)
        if (this.Getlist.length <= 1) {
          this.pageParams.page--
        }
        this.Getlist()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },
    // 弹层控制
    openDilog(row) {
      this.showDialog = true
      this.DialogData = row
    },
    // 添加精选
    choiceAdd(row) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        const { data } = await choice()
        console.log(data.items)
        if (!data.items.some(item => item.id === row.id)) {
          row.choiceState = 1
          await choiceAdd(row)
          this.$message.success('加入精选成功')
          this.Getlist()
        }
      })
    },
    // 修改内容
    async revamp(row) {
      const { data } = await detail(row)
      this.$router.push({ path: 'new', params: { amendTopic: data } })
    },

  }

}
</script>

<style scoped lang='scss'>
.btn {
  position: relative;
  left: 92%;
  margin-bottom: 15px;
}

.item {
  margin: 4px;
}
</style>
